<template>
    <div id="imglist">
        <img class="ban" src="../../assets/logo/02.png" alt="">
        <img class="ban" src="../../assets/logo/03.png" alt="">
        <img class="ban" src="../../assets/logo/04.png" alt="">
        <img class="ban" src="../../assets/logo/05.png" alt="">
        <img class="ban" src="../../assets/logo/06.png" alt="">
        <div class="dialog">
            <img class="bg" src="../../assets/logo/07.png" alt="">
            <div class="joinbox" >
                <img src="../../assets/img/join.png" alt="" class="join" @click="showDialog">
            </div>
        </div>
        <img class="ban" src="../../assets/logo/08.png" alt="">
        <dialog-box :DialogData="DialogData" :formData="formData"></dialog-box>
    </div>
</template>

<script>
    import DialogBox from "@/components/index/Dialog"
    export default {
        data() {
            return {
                DialogData: {
                    show: false,
                    title: "立即加盟"
                },
                formData: {

                }
            }
            
        },
        components: {
                DialogBox,
        },
        methods: {
            showDialog() {
                
                this.DialogData = {
                    show: true,
                    title: "立即加盟"
                }
                this.formData = {

                }
            },
        },
    }
</script>

<style  scoped>
.dialog {
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}
.dialog .joinbox {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
}
.dialog .joinbox .join {
    display: block;
    cursor: pointer;
}
.dialog  .bg {
    width: 100%;
    min-width: 1200px;
    display: block;
}
#imglist {
    width: 100%;
    min-width: 1200px;
}
#imglist .ban {
    width: 100%;
    display: block;
}
</style>